<template>
  <view class="detail">
    <view class="box">
      <view class="title">包裹信息</view>
	  <view class="line">总件数: <text class="ttitle">{{mainData.forecast_package&&mainData.forecast_package.weights}}</text></view>
      <view class="line flex">
		  快递单号：
		  <view style="flex: 1;">
		  	<view class="flex" style="margin-bottom: 10rpx;" v-for="it in mainData.forecast_package && mainData.forecast_package.tracks">
		  		<view style="flex: 1;">{{it}}</view>
		  		<image @click="$utils.copyMessage(it)" src="@/static/icon/copy-icon.png" class="copy-btn" mode="aspectFill"></image>
		  	</view>
		  </view>
		  <!-- {{mainData.forecast_package && mainData.forecast_package.track}} -->
	  </view>
      <!-- <view class="line">仓库： {{mainData.warehouse}}</view> -->
      <view class="line flex">
      	预报时间：
		<view style="flex: 1;">
			<view style="margin-bottom: 10rpx;" v-for="it in mainData.forecast_package && mainData.forecast_package.fadd_time">
				{{it}}
			</view>
		</view>
		<!-- {{mainData.forecast_package && mainData.forecast_package.add_time}} -->
      </view>
	  <view class="line flex">入库时间： 
		  <view style="flex: 1;">
			<view style="margin-bottom: 10rpx;" v-for="it in mainData.forecast_package && mainData.forecast_package.warehousing_time">
				{{(it!=null && it)?it:''}}
			</view>
		  </view>
	  <!-- {{mainData.forecast_package && mainData.forecast_package.warehousing_time}} -->
	  </view>
	  <view class="line flex">预报备注：
		  <view style="flex: 1;">
			<view style="margin-bottom: 10rpx;" v-for="it in mainData.forecast_package && mainData.forecast_package.remakess">
				{{it}}
			</view>
		  </view>
	  </view>
      <view class="line">提交发货时间：{{mainData.add_time}}</view>
      <view class="line" v-if="mainData.pay_time">支付时间：{{mainData.pay_time}}</view>
	  <view class="line" v-if="mainData.deliver_time">发货时间：{{mainData.deliver_time}}</view>
      <view class="line" v-if="mainData.sign_time">签收时间：{{mainData.sign_time}}</view>
	  <!-- <view class="line">体积重: <text class="ttitle">{{mainData.volume||0}}</text></view> -->
      <view v-if="mainData.forecast_package && mainData.forecast_package.type_name">物品类型: {{mainData.forecast_package && mainData.forecast_package.type_name}}</view>
    </view>
    <view class="box">
      <view class="title">运单信息</view>
      <view class="line flex">运单编号：{{mainData.order_id}}
		<image @click="$utils.copyMessage(mainData.order_id)" src="@/static/icon/copy-icon.png" class="copy-btn" mode="aspectFill"></image>
	  </view>
      <!-- <view class="line">仓库： {{mainData.warehouse}}</view> -->
      <view class="line">运输路线：{{mainData.route}}</view>
	  <view class="line" v-if="mainData.delivery_id && mainData.delivery_id.lenght && mainData.delivery_id[0]">
	  	美国运单号:
		<view class="flex">
			<view v-for="(item,index) in mainData.delivery_id">
				{{item}}{{index!=mainData.delivery_id.length-1?'、':''}}
			</view>
		</view>
	  </view>
	  <view class="line" v-if="main.delivery_name">
	  	快递名称:{{main.delivery_name}}
	  </view>
    </view>
    <view class="box">
      <view class="title">收件人信息</view>
      <view class="line">姓名：{{mainData.real_name}}</view>
      <view class="line">电话：{{mainData.user_phone}}</view>
      <view class="line">国家：{{mainData.c_name}}</view>
      <view class="line">区域：{{mainData.w_name}}</view>
	  <view class="line">省/州：{{mainData.state}}</view>
	  <view class="line">城市：{{mainData.city}}</view>
	  <view class="line">邮编：{{mainData.email}}</view>
      <view class="line">地址：{{mainData.user_address}}</view>
      <!-- <view>邮编：1444</view> -->
    </view>
    <view class="box" v-for="item in mainData.info">
      <view class="title">物品信息</view>
      <view class="line flex">
        <!-- <view class="rightmargin">类型：{{mainData.forecast_package && mainData.forecast_package.type_name}}</view> -->
        <view class="leftmargin">名称：{{item.name}}</view>
      </view>
      <view class="line flex">
        <view class="rightmargin">数量：{{item.num || 1}}</view>
		<view class="leftmargin">单价：{{item.price||'无'}}</view>
      </view>
      <!-- <view class="flex">
		  <view class="leftmargin">规格：{{item.spe}}</view>
        <view class="rightmargin">品牌：{{item.brand}}</view>
      </view> -->
    </view>
    <view class="box">
      <view class="title">订单管理</view>
      <view class="line">实际重量(kg)： {{mainData.weight || '待装箱'}}</view>
	  <view class="line">体积(cm): <text class="ttitle">{{mainData.lwh||0}}</text></view>
	  <view class="line">体积重量(kg)： {{mainData.tj_weight || '待装箱'}}</view>
	  <view class="line">收费重量(kg)： {{mainData.sf_weight || '待装箱'}}</view>
	  
      <!-- <view class="line">体积重： {{mainData.forecast_package&&mainData.forecast_package.volume}}</view> -->
      <view class="line">订单备注： {{mainData.remakes}}</view>
      <view class="line">费用： 总计{{mainData.pay_price}} 
	  <!-- 运费:¥2.8,包裹增值服务:¥5； -->
	  </view>
	  <view class="line" v-if="mainData.voucher">
		  <view style="margin-bottom: 16rpx;">
		  	转账凭证：
		  </view>
		  <view class="imglist flex" >
		    <view
		      class="img"
		      @click="preImage([mainData.voucher],0)"
		    >
		      <u-image
		        :src="mainData.voucher"
		        width="96rpx"
		        height="96rpx"
		      ></u-image>
		    </view>
		  </view>
	  </view>
      <view class="line">优惠券： ¥{{mainData.coupon_price||0}}</view>
      <view class="line">积分： 消耗{{mainData.use_integral || 0}}</view>
      <view class="line">增值服务： 
		<view v-for="item in (mainData.forecast_package&&mainData.forecast_package.add_service)">
			{{item}}
		</view>
	  </view>
      <view class="line">照片：</view>
      <view class="imglist flex">
        <view
          class="img"
          v-for="(item, index) in (mainData.forecast_package&&mainData.forecast_package.images)"
          :key="index"
          @click="preImage(mainData.forecast_package&&mainData.forecast_package.images,index)"
        >
          <u-image
            :src="item"
            width="96rpx"
            height="96rpx"
          ></u-image>
        </view>
      </view>
    </view>
    <view class="btnbox space-between" v-if="btnShow">
      <view class="price">总计：<text class="btitle">¥7.8</text></view>
      <view class="btn">立即付款</view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      btnShow: false,
	  mainData:'',
	  id:''
    };
  },

  onLoad(options) {
    if (options.type == "btn") {
      this.btnShow = true;
    }
	if (options.id) {
	  this.id = options.id;
	  this.getMainData();
	}
  },

  methods: {
	getMainData(){
		this.$api.post({
		    url: "/ebapi/public_api/deliver_details",
		    data: {id:this.id},
		    success: (res) => {
				this.mainData = res;
				if(this.mainData.info){
					this.mainData.info = JSON.parse(this.mainData.info);
				}
			},
		 })
	},
    preImage(imgArr,index) {
      console.log("previewImage");
      this.$uniApi.previewImage(imgArr,index);
    },
  },
};
</script>

<style lang="scss">
page {
  padding: 0;
}

.detail {
  position: relative;
  padding-bottom: 24rpx;
  font-size: 30rpx;
  .box {
    margin: 24rpx;
    padding: 36rpx 36rpx 45rpx;
    box-shadow: 0rpx 2rpx 10rpx 1rpx rgba(0, 0, 0, 0.08);
    border-radius: 16rpx;

    .title {
      font-weight: bold;
      font-size: $uni-text-size-title;
      margin-bottom: 35rpx;
    }

    .ttitle {
      color: #e82e2e;
      margin-left: 20rpx;
    }

    .line {
      margin-bottom: 35rpx;
    }

    .rightmargin {
      flex: 1;
    }

    .leftmargin {
      flex: 1;
    }

    .serve {
      color: $uni-text-color-grey;
      margin-bottom: 25rpx;
    }

    .imglist {
		flex-wrap: wrap;
      .img {
        width: 96rpx;
        height: 96rpx;
        margin-right: 24rpx;
      }
    }
  }

  .btnbox {
    width: 750rpx;
    height: 104rpx;
    background: #ffffff;
    box-shadow: 0rpx -2rpx 0rpx 1rpx rgba(0, 0, 0, 0.16);
    opacity: 1;
    position: sticky;
    bottom: 0;
    padding: 0 24rpx;
    font-size: $uni-text-size-title;

    .btitle {
      color: #e82e2e;
    }

    .btn {
      width: 188rpx;
      height: 70rpx;
      line-height: 70rpx;
      text-align: center;
      background: #e91818;
      color: #ffffff;
      border-radius: 35rpx 35rpx 35rpx 35rpx;
      opacity: 1;
    }
  }
}
</style>
